<template>
    <div class="content">
        <div class="top">
        </div>
        <!-- -------------------------- -->
        <div class="map-top">
            <div class="item">
                <h4>全部SKU数量(个)</h4>
                <el-statistic class="fontliti" group-separator="" :value="outputallSKU" />
            </div>
            <div class="item">
                <h4>动销SKU数量(个)</h4>
                <el-statistic class="fontliti" group-separator="" :value="outputallSKU1" />
            </div>
            <div class="item">
                <h4>已合作平台商(个)</h4>
                <el-statistic class="fontliti" group-separator="" :value="outputPlatform" />
            </div>
            <div class="item">
                <h4>动销品牌数(个)</h4>
                <el-statistic class="fontliti" group-separator="" :value="outputBrand1" />
            </div>
        </div>
        <!-- ------------------------ -->

        <!-- ---------22 -->
        <div class="classfy all-box ">~
            <div class="title">
                <img src="../assets/images/Group 4114.png" class="tit_img" alt="">
            </div>
            <div class="box">
                <ul class="right_box ">
                    <li class="fzColor" style="width: 30%;">商品类目</li>
                    <li class="fzColor" style="width: 30%;">排名</li>
                    <li class="fzColor" style="width: 30%;">SKU数量</li>
                </ul>
                <ul>
                    <!-- singleHeight：单步运动停止的高度 -->
                    <vue3-seamless-scroll class="v-s-s" :list="towData" :hover="true" :step="0.2">
                        <!-- //隔行变色 -->
                        <div class="v-s-s_item" v-for="(item, index) in towData" :key="index"
                            :class="index % 2 === 0 ? 'even' : 'odd'">
                            <!-- //设置宽的目的为让内容居中显示 -->
                            <div style="width: 30%;">{{ item.title }}</div>
                            <div style="width: 30%;"> TOP {{ index < 9 ? `0${index + 1}` : index + 1 }}</div>
                                    <div style="width: 30%;">{{ item.goods_sku_num }}

                                    </div>

                            </div>
                    </vue3-seamless-scroll>
                </ul>
            </div>
        </div>
        <!-- ----------------33 -->
        <div class="banner all-box ">
            <div class="title">
                <img src="../assets/images/Group 4114.png" class="tit_img" alt="">
            </div>
            <div class="box">
                <ul class="right_box fzColor">
                    <li class="fzColor" style="width: 30%;">热销品牌</li>
                    <li class="fzColor" style="width: 30%;">合作SKU数量</li>
                    <li class="fzColor" style="width: 30%;">销售占比</li>
                </ul>
                <ul>
                    <!-- singleHeight：单步运动停止的高度 -->
                    <vue3-seamless-scroll class="v-s-s" :list="threeData" :hover="true" :step="0.3">
                        <div class="v-s-s_item" v-for="(item, index) in threeData" :key="index"
                            :class="index % 2 === 0 ? 'even' : 'odd'">
                            <div style="width: 30%;">{{ item.brand_name }}</div>
                            <div style="width: 30%;">{{ item.goods_sku_num }}</div>
                            <div style="width: 30%;">{{ item.sale_ratio }}%</div>
                        </div>
                    </vue3-seamless-scroll>
                </ul>
            </div>
        </div>
        <!-- -------------------44 -->
        <div class="replace all-box ">
            <div class="title">
                <img src="../assets/images/Group 4114.png" class="tit_img" alt="">
            </div>
            <div class="box">
                <div class="item">

                    <div class="text">
                        <span class="img">
                            <img src="../assets/images/vis-daifa1.png" alt="">
                        </span>
                        <span class="num">当日订单
                            <b>
                                <el-statistic class="fzColor" group-separator="" :value="outputdaifaNum2" />件
                            </b>
                        </span>
                    </div>

                </div>
                <div class="item">
                    <div class="text">
                        <span class="img">
                            <img src="../assets/images/vis-daifa2.png" alt="">
                        </span>
                        <span class="num">30日订单
                            <b>
                                <el-statistic class="fzColor" group-separator="" :value="outputdaifaNum3" />件
                            </b>
                        </span>
                    </div>

                </div>
            </div>
        </div>
        <!-- ------------------55 -->
        <div class="buying all-box ">
            <div class="title">
                <img src="../assets/images/Group 4114.png" class="tit_img" alt="">
            </div>
            <div class="box">
                <div class="buying_top">
                    <div class="item-t">
                        <div class="text">
                            <span class="img">
                                <img src="../assets/images/vis-buying1.png" alt="">
                            </span>
                            <span class="num">订单数量<b class="fzColor"><el-statistic group-separator=""
                                        :value="outputjicai1" /></b><span>单</span></span>
                        </div>
                    </div>
                    <div class="item-t">
                        <div class="text">
                            <span class="img">
                                <img src="../assets/images/vis-buying2.png" alt="">
                            </span>
                            <span class="num">集采额 <b class="fzColor"><el-statistic group-separator=""
                                        :value="outputjicai" /></b><span>元</span></span>
                        </div>
                    </div>
                </div>
                <ul>
                    <vue3-seamless-scroll class="v-s-s" :list="article" :hover="false" :step="0.1">
                        <div class="v-s-s_item" v-for="(item, index) in article" :key="index"
                            :class="index % 2 === 0 ? 'even' : 'odd'">
                            <div class="item">
                                <div class="progtit" :style="{ color: index == 0 ? '#00f0ff' : '' }">
                                    <s>TOP 0{{ index + 1 }} {{ item.goods_name.slice(0, 10) }}</s>
                                    <span>{{ item.paid_money }}</span>
                                </div>
                                <el-progress :duration="50" :percentage="item.paid_money / 20000 * 100" striped
                                    :show-text="false" striped-flow>
                                </el-progress>
                            </div>
                        </div>
                    </vue3-seamless-scroll>
                </ul>
            </div>
        </div>
        <!-- -------------------66 -->
        <div class="brand_user all-box ">
            <div class="title">
                <img src="../assets/images/Group 4114.png" class="tit_img" alt="">
            </div>
            <div class="box">
                <div class="item">
                    <p class="text"><el-statistic group-separator="" :value="outputBrand" /> <b>个</b></p>
                    <div class="image "></div>
                    <p class="bottm">合作品牌</p>
                </div>
                <div class="item">
                    <p class="text"><el-statistic group-separator="" :value="outputBrand1" /> <b>个</b></p>
                    <div class="image"></div>
                    <p class="bottm">动销品牌数</p>
                </div>
                <div class="item">
                    <p class="text"><el-statistic group-separator="" :value="outputBrand2" /> <b>个</b></p>
                    <div class="image"></div>
                    <p class="bottm">已报品品牌</p>
                </div>
            </div>
        </div>

        <!--------------------- 88 -->
        <div class="merchant all-box ">
            <div class="title">
                <img src="../assets/images/Group 4114.png" class="tit_img" alt="">
            </div>
            <div class="box">
                <div class="radar-screen">
                    <div class="radar-rings">
                        <!--  悬浮-->
                        <div class="radar-ring " v-for="n in 5" :key="n" @mouseover="radarInnerFN(n)"
                            :style="{ opacity: numRadar == n ? 0.7 : 1, }">
                        </div>
                        <div class="bor_dot">
                            <div class="dot" v-for="(n, index) in 4" :key="index"></div>
                        </div>
                    </div>
                </div>
                <div class="list">
                    <ul>
                        <vue3-seamless-scroll class="v-s-s" :list="eightData" :hover="false" :step="0.1">
                            <div class="v-s-s_item" v-for="(item, index) in eightData" :key="index">
                                <div class=" item">
                                    <b>{{ item.slice(0, 5) }}</b>
                                </div>
                            </div>
                        </vue3-seamless-scroll>
                    </ul>
                </div>
            </div>
        </div>
        <div ref="charts" >
            <img src="../assets/images/Chamap.png" alt="" style="z-index: 999;">
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, getCurrentInstance, nextTick, onUnmounted } from "vue";
import * as echarts from "echarts";
import 'echarts-liquidfill'
import china from "@/100000_full.json"
import { useTransition } from '@vueuse/core'
import request from "@/api/request.js";
// 页面数据
const visualData = async () => {
    const res = await request.get('https://scm.wwtscm.com/api/index/large_digital_screen')
    // SKU数量 111
    allSKU.value = res.data.sku_all_num
    allSKU1.value = res.data.sku_sale_num
    goodsOne.value = 100
    goodsTow.value = res.data.sku_sale_num / res.data.sku_all_num * 100
    // 类目排名 2222
    towData.value = res.data.classifylist
    //品牌排名 3333
    threeData.value = res.data.brandlist
    // 品牌商数据   666
    brandUser.value = res.data.brand_data.all_num
    brandUser1.value = res.data.brand_data.hz_num
    brandUser2.value = res.data.brand_data.dhz_num
    // 平台商 
    platformNum.value = res.data.platform_num
    // 代发订单 4444
    daifaNum.value = res.data.daifadata.day_money
    daifaNum1.value = res.data.daifadata.month_money
    daifaNum2.value = res.data.daifadata.day_num
    daifaNum3.value = res.data.daifadata.month_num
    // 集采数据 5555
    jicaidata.value = res.data.jicaidata.month_money
    jicaidata1.value = res.data.jicaidata.month_sale_num
    article.value = res.data.jicailist
    // 客户分布数据
    addressData.value = res.data.addresslist
    addressnum.value = res.data.addresslist[0].num
    addressnum1.value = res.data.addresslist[1].num
    addressnum2.value = res.data.addresslist[2].num
    addressnum3.value = res.data.addresslist[3].num
    addressnum4.value = res.data.addresslist[4].num
    // 合作平台
    platformList.value = res.data.platformlist
    platformDnum.value = res.data.platformlist[0].num
    platformDnum1.value = res.data.platformlist[1].num
    centerNumber.value = res.data.platformlist[0].num
}
// // 地图数据
const chinaDataFn = async () => {
    const res = await request.get('https://scm.wwtscm.com/api/index/large_digital_screen_map')
    let arr = []
    res.data.forEach((ties) => {
        mapData.features.forEach((item) => {
            if (ties.province == item.properties.name) {
                arr.push({ value: [...item.properties.center, 4900] })
            }
        })
    })
    seriesDa8.value = [...arr]
}
// 888data
const eightData = ref([
    "东航商城",
    "天虎云商",
    '翼支付商城',
    '善融商务',
    '融E点',
    '农超商城',
    '凤凰会',
    '壹直购商城',
    '万里通',
    '中国移动积分商城'
])
const seriesDa8 = ref()
const mapData = china;
const platformNum = ref(0)
const centerNumber = ref(2560);
const goodsOne = ref(0)
const goodsTow = ref(0)
const outputPlatform = useTransition(platformNum, {
    duration: 1500,
})
// 5
const jicaidata = ref(0)
const jicaidata1 = ref(0)
const outputjicai = useTransition(jicaidata, {
    duration: 1500,
})
const outputjicai1 = useTransition(jicaidata1, {
    duration: 1500,
})
// 
const brandUser = ref(0)//brand_user数据
const brandUser1 = ref(0)
const brandUser2 = ref(0)
const outputBrand = useTransition(brandUser, {
    duration: 1500,
})
const outputBrand1 = useTransition(brandUser1, {
    duration: 1500,
})
const outputBrand2 = useTransition(brandUser2, {
    duration: 1500,
})
// SKU数据
const allSKU = ref(0)
const allSKU1 = ref(0)
const outputallSKU = useTransition(allSKU, {
    duration: 1500,
})
const outputallSKU1 = useTransition(allSKU1, {
    duration: 1500,
})
// 4
const daifaNum = ref(0)
const daifaNum1 = ref(0)
const daifaNum2 = ref(0)
const daifaNum3 = ref(0)
const outputdaifaNum = useTransition(daifaNum, {
    duration: 1500,
})
const outputdaifaNum1 = useTransition(daifaNum1, {
    duration: 1500,
})
const outputdaifaNum2 = useTransition(daifaNum2, {
    duration: 1500,
})
const outputdaifaNum3 = useTransition(daifaNum3, {
    duration: 1500,
})
// 客户分布
const addressData = ref()
const addressnum = ref(0)
const addressnum1 = ref(0)
const addressnum2 = ref(0)
const addressnum3 = ref(0)
const addressnum4 = ref(0)

// 合作平台
const platformList = ref()
const platformDnum = ref(0)
const platformDnum1 = ref(0)

onUnmounted(() => {
    clearInterval(timeId.value)
})


chinaDataFn()//地图数据
onMounted(() => {
    visualData()//获取页面数据 
    timeFn()//日期
    // const Instance = getCurrentInstance();
    // const refCharts = Instance.refs.charts;
    // const charts = echarts.init(refCharts);
    // initCharts(charts);

});
// 地图配置
// async function initCharts(charts) {
//     const res = await request.get('https://scm.wwtscm.com/api/index/large_digital_screen_map')
//     let arr = []
//     res.data.forEach((ties) => {
//         mapData.features.forEach((item) => {
//             if (ties.province == item.properties.name) {
//                 arr.push({ value: [...item.properties.center, ties.num] })
//             }
//         })
//     })
//     seriesDa8.value = arr
//     // 地图注册，第一个参数的名字必须和option.geo.map一致
//     nextTick(() => {
//         const option = {
//             tooltip: {
//                 trigger: 'item'
//             },
//             geo: [
//                 {
//                     map: 'china',
//                     roam: false, // 是否允许缩放
//                     silent: false,
//                     zoom: 1,
//                     layoutCenter: ['50.1%', '48.8%'], // 地图居中位置
//                     layoutSize: '80%', // 地图大小
//                     itemStyle: {
//                         areaColor: "rgba(73, 168, 208, 0.2)",
//                         borderColor: 'rgba(34, 153, 211,1)',
//                         borderWidth: 1,
//                         shadowColor: "rgba(73, 168, 208,0.2)",
//                         shadowOffsetY: 1,
//                     },
//                     emphasis: {
//                         itemStyle: {
//                             areaColor: "#00BAFF",

//                         }
//                     },
//                     zlevel: -1,
//                     label: {
//                         show: false, //是否展示标签
//                         fontSize: 0, //控制标签文本大小( 当 fontSize: 0 时不显示)
//                     },

//                 },
//                 {
//                     map: 'china',
//                     roam: false, // 是否允许缩放
//                     silent: false,
//                     zoom: 1.01,
//                     layoutCenter: ['50%', '50%'], // 地图居中位置
//                     layoutSize: '80%', // 地图大小
//                     itemStyle: {
//                         areaColor: "rgba(0, 186, 255, 0.2)",
//                         // shadowOffsetY: 10,
//                         borderColor: 'rgba(255,255, 255,0)',
//                         borderWidth: 1,
//                         // shadowColor: "rgba(255, 255, 255,0.6)",
//                     },
//                     emphasis: {
//                         show: false,
//                         itemStyle: {
//                             areaColor: "#00BAFF",

//                         }
//                     },
//                     zlevel: -2,
//                     regions: [{
//                         name: "南海诸岛",
//                         itemStyle: {
//                             // 隐藏地图
//                             opacity: 0, // 为 0 时不绘制该图形
//                         },
//                         label: {
//                             show: false // 隐藏文字
//                         }
//                     }],
//                 },
//                 {
//                     map: 'china',
//                     roam: false, // 是否允许缩放
//                     silent: false,
//                     zoom: 1,
//                     layoutCenter: ['50%', '51%'], // 地图居中位置
//                     layoutSize: '80%', // 地图大小
//                     itemStyle: {
//                         areaColor: "rgba(0, 0, 0, 0.6)",
//                         borderColor: 'rgba(0, 186, 255, 0)',
//                         borderWidth: 0,
//                         // shadowColor: "rgba(0, 0, 0, 1)",
//                         // shadowOffsetY: 15,
//                         // shadowOffsetX: 0,
//                     },
//                     emphasis: {
//                         show: false,
//                         itemStyle: {
//                             areaColor: "#00BAFF",
//                         }
//                     },
//                     zlevel: -3,
//                     regions: [{
//                         name: "南海诸岛",
//                         itemStyle: {
//                             opacity: 0, // 为 0 时不绘制该图形
//                         },
//                         label: {
//                             show: false // 隐藏文字
//                         }
//                     }],
//                 },

//             ],
//             series: [
//                 {
//                     name: "热力图",
//                     type: "heatmap",
//                     coordinateSystem: "geo",
//                     data: seriesDa8.value,
//                     pointSize: 8,
//                     blurSize: 15,
//                     minOpacity: 0.1,
//                     maxOpacity: 0.9,
//                     label: {
//                         show: false // 不显示省份标签  
//                     },
//                     itemStyle: {
//                         borderColor: '#333', // 设置轮廓颜色  
//                         borderWidth: 1, // 设置轮廓线宽  
//                         areaColor: 'rgba(0,0,0,0)', // 设置填充颜色为透明，以只显示轮廓  
//                     },
//                     emphasis: {
//                         itemStyle: {
//                             borderColor: '#333', // 高亮时轮廓颜色  
//                             borderWidth: 1
//                         },
//                         label: {
//                             show: false
//                         }
//                     }
//                 },
//             ],
//             visualMap: [
//                 {
//                     // 地图组件映射
//                     show: false,
//                     min: 0,
//                     max: 10,
//                     splitNumber: 4,
//                     inRange: {  // 定义 在选中范围中 的视觉元素。
//                         color: ['#000BFF', '#5BFF00', '#FFFE00', '#FB1F01']
//                     },

//                     textStyle: {
//                         color: '#fff',
//                         fontWeight: '700',
//                         fontSize: '16'
//                     }
//                 },
//             ],
//         };
//         echarts.registerMap("china", /**/ mapData);
//         charts.setOption(option);

//     })
// }
// 雷达图
const numRadar = ref()
function radarInnerFN(n) {
    numRadar.value = n
    if (n == 4) {
        centerNumber.value = platformList.value[1].num
    } else if (n == 3) {
        centerNumber.value = platformList.value[0].num
    }
}

// 向上滚动-
const towData = ref(
    [
        { name: '家居', numb: '2200', index: "TOP 01" },
        { name: '家居', numb: '2100', index: "TOP 02" },
        { name: '家居', numb: '2000', index: "TOP 03" },
        { name: '家居', numb: '1900 ', index: "TOP 04" },
        { name: '家居', numb: '1800 ', index: "TOP 05" },
        { name: '家居', numb: '1700 ', index: "TOP 06" },
        { name: '家居', numb: '1600 ', index: "TOP 07" },
        { name: '家居', numb: '1500 ', index: "TOP 08" },
        { name: '家居', numb: '1400 ', index: "TOP 09" },
        { name: '家居', numb: '1400 ', index: "TOP 10" },
    ]
)
const threeData = ref(
    [
        { name: '图书', numb: '2200', index: "55%" },
        { name: '图书', numb: '2100', index: "55%" },
        { name: '图书', numb: '2000', index: "55%" },
        { name: '图书', numb: '1900 ', index: "55%" },
        { name: '图书', numb: '1800 ', index: "55%" },
        { name: '图书', numb: '1700 ', index: "55%" },
        { name: '图书', numb: '1600 ', index: "55%" },
        { name: '图书', numb: '1500 ', index: "55%" },
        { name: '图书', numb: '1400 ', index: "55%" },
        { name: '图书', numb: '1400 ', index: "55%" },
    ]
)
const article = ref()
const yearDay = ref('')
const hoursMinu = ref('')
const timeId = ref()
const timeFn = () => {
    timeId.value = setInterval(() => {
        // 日期
        var currentDate = new Date();
        var year = currentDate.getFullYear();
        var month = currentDate.getMonth() + 1;
        month = month < 10 ? '0' + month : month;
        var day = currentDate.getDate();
        // 时分
        var hours = currentDate.getHours();
        var minutes = currentDate.getMinutes();
        var seconds = currentDate.getSeconds();
        seconds = seconds < 10 ? '0' + seconds : seconds;
        minutes = minutes < 10 ? '0' + minutes : minutes;
        hours = hours < 10 ? '0' + hours : hours;
        // 星期
        // 获取星期几（0代表星期日，1代表星期一，以此类推）  
        var dayOfWeek = currentDate.getDay();
        var dayOfWeekArray = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
        var weekDay = dayOfWeekArray[dayOfWeek];
        day = day < 10 ? '0' + day : day;
        yearDay.value = year + '年 ' + month + '月 ' + day + '日';
        hoursMinu.value = weekDay + ' ' + hours + ': ' + minutes + ': ' + seconds;
    }, 1000);
}
// 

</script>

<style scoped lang="scss">
@import "@/assets/base.scss";

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes tranLY {
    0% {
        transform: translate(-50%, 0);
    }

    50% {
        transform: translate(-50%, 30%);
    }

    100% {
        transform: translate(-50%, 0);
    }
}

@keyframes opcitY {
    0% {
        opacity: 0.3;
    }

    50% {
        opacity: 0.8;
    }

    100% {
        opacity: 0.3;
    }
}

.anm_rotate {
    animation: rotate 3s;
}

.content {
    padding: 0 1vw;
    background-color: #06080C;
    height: 100vh;
    background-image: url('../assets/images/alllbgc_city.png');
    background-repeat: no-repeat;
    background-position: center 4vw;
    background-size: 100% 100%;
    position: relative;
    overflow: hidden;

    // 头部标题
    .top {
        background-image: url('../assets/images/size-top.png');
        background-repeat: no-repeat;
        background-position: center top;
        background-size: 120% 8vw;
        width: 100%;
        height: 8vw;
    }

    // 商品信息
    .map-top {
        position: absolute;
        display: flex;
        justify-content: space-between;
        width: 90%;
        top: 8.5vw;
        left: 5%;
        z-index: 1;

        .item {
            width: 22vw;
            height: 9.6vw;
            text-align: center;
            margin-right: 0.5vw;
            padding-top: 0.2vw;
            background-size: 100% 9.6vw;
            transition: all 1s;
            background-repeat: no-repeat;

            &:hover {
                transform: scale(1.1);
            }

            .el-statistic {
                ::v-deep .el-statistic__content {
                    height: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    .el-statistic__number {
                        font-weight: 700;
                        color: #d1eeff;
                        font-size: $banner-title-size5;
                    }
                }
            }

            &:nth-child(1) {
                background-image: url('../assets/images/map-top1.png');
                border-left: #40DDFD 0.8vw solid;
            }

            &:nth-child(2) {
                background-image: url('../assets/images/map-top2.png');
                border-left: #1170DD 0.8vw solid;
            }

            &:nth-child(3) {
                background-image: url('../assets/images/map-top3.png');
                border-left: #77ADFF 0.8vw solid;
            }

            &:nth-child(4) {
                background-image: url('../assets/images/map-top4.png');
                border-left: #FFD15C 0.8vw solid;
            }

            h4 {
                font-size: $content-title-size2;
                color: #fff;
            }
        }
    }

    // 标题
    .title {
        width: 44.5vw;
        height: 5.6vw;
        background-size: 100% 5.6vw;
        background-repeat: no-repeat;

        .tit_img {
            width: 2.2vw;
            margin: 1vw 0 0 1vw;
            transform-origin: center center;
            animation: rotate 15s infinite;
        }
    }

    // 公共的
    .all-box {
        position: absolute;
        color: #fff;
    }

    .fzColor {
        color: #d1eeff;
        font-weight: 700;
    }

    // 立体
    .fontliti {
        ::v-deep .el-statistic__content {
            .el-statistic__number {
                color: #d1eeff;
                text-shadow: 0.01vw 0.04vw 0px rgba($color: #424242, $alpha: 1),
                    0.02vw 0.08vw 0px rgba($color: #4c4c4c, $alpha: 1),
                    0.03vw 0.1vw 0px rgba($color: #4c4c4c, $alpha: 1),
                    0.04vw 0.12vw 0px rgba($color: #3e3e3e, $alpha: 1),
                    0.05vw 0.16vw 0px rgba($color: #3f3f3f, $alpha: 1),
                    0.06vw 0.18vw 0px rgba($color: #3f3f3f, $alpha: 1),
                    0.08vw 0.2vw 0px rgba(255, 255, 255, 0.2);

            }
        }
    }

    // 2
    .classfy {
        top: 20vw;
        left: 5%;

        .title {
            background-image: url('../assets/images/visual-tit-bgc2.png');
        }

        .box {
            width: 44.5vw;
            font-size: $title-font-size7;
            display: flex;
            flex-direction: column;
            align-items: center;
            background-color: rgba($color: #394b6e, $alpha: 0.2);

            .right_box {
                border: #1E7BD6 solid 0.1vw;
                background: linear-gradient(transparent, #114BA0);
                width: 44.5vw;
                height: 3vh;
                line-height: 3vh;
                display: flex;
                overflow: hidden;
                justify-content: space-between;
                text-align: center;

                li {
                    font-size: $content-title-size ;
                    font-weight: 700;
                }
            }

            // 滚动代码 
            .v-s-s {
                width: 44.5vw;
                height: 15vh;
                overflow: hidden;
                text-align: center;
                color: aliceblue;

                .v-s-s_item {
                    width: 44.5vw;
                    height: 2.8vh;
                    line-height: 2.8vh;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    text-align: center;
                    flex-direction: row;
                    font-size: $content-title-size2 ;
                }
            }

            //隔行变色
            .even {
                color: #66b3ff;
            }
        }
    }

    // 3
    .banner {
        top: 20vw;
        right: 5%;

        .title {
            background-image: url('../assets/images/visual-tit-bgc3.png');
        }

        .box {
            font-size: $title-font-size7;
            width: 44.5vw;
            background-color: rgba($color: #394b6e, $alpha: 0.2);

            .right_box {
                border: #1E7BD6 solid 0.1vw;
                background: linear-gradient(transparent, #114BA0);
                width: 44.5vw;
                height: 3vh;
                line-height: 3vh;
                display: flex;
                justify-content: space-between;
                text-align: center;
                overflow: hidden;

                li {
                    font-size: $content-title-size;
                    font-weight: 700;
                }
            }

            // 滚动代码 
            .v-s-s {
                width: 44.5vw;
                height: 15vh;
                overflow: hidden;
                text-align: center;
                color: aliceblue;

                .v-s-s_item {
                    width: 44.5vw;
                    height: 2.8vh;
                    line-height: 2.8vh;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    text-align: center;
                    flex-direction: row;
                    font-size: $content-title-size2 ;

                }
            }

            //隔行变色
            .even {
                color: #66b3ff;
            }
        }
    }

    // 4
    .replace {
        top: 65%;
        left: 4%;

        .title {
            background-image: url('../assets/images/visual-tit-bgc4.png');
        }

        .box {
            width: 36.5vw;
            height: 10vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;

            .item {
                display: flex;
                justify-content: space-between;
                align-items: center;
                width: 100%;
                height: 40%;
                margin-bottom: 0.5vw;

                .text {
                    flex: 1;
                    height: 100%;
                    display: flex;
                    font-size: $content-title-size2;

                    .img {
                        display: inline-block;
                        width: 8vw;
                        height: 100%;
                        margin-right: 0.5vw;
                        border: rgba(0, 213, 255, 0) solid 0.2vw;
                        overflow: hidden;
                        position: relative;
                        display: flex;
                        align-items: center;
                        justify-content: center;

                        &::before {
                            content: '';
                            position: absolute;
                            left: -50%;
                            top: -50%;
                            width: 200%;
                            height: 200%;
                            background-repeat: no-repeat;
                            background-position: 0 0;
                            background-image: conic-gradient(transparent, #8ed4ff, transparent 40%);
                            animation: rotate 3s linear 1s infinite;
                            z-index: 0;

                        }

                        img {
                            height: 90%;
                            position: absolute;
                            z-index: 1;

                        }
                    }


                    .num {
                        flex: 1;
                        display: inline-block;
                        height: 100%;
                        background: linear-gradient(to right, #1170DD, transparent);
                        line-height: 3.25vw;
                        padding: 0 0.5vw;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;

                        b {
                            display: flex;
                            align-items: center;
                            justify-content: center;

                            &:nth-child(1) {
                                flex: 1;
                            }
                        }

                        .el-statistic {
                            ::v-deep .el-statistic__content {
                                height: 100%;
                                display: flex;
                                justify-content: center;
                                align-items: center;

                                .el-statistic__number {
                                    font-weight: 700;
                                    font-size: $content-title-size;
                                    color: #d1eeff;
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    // 5
    .buying {
        top: 65%;
        right: 4%;
        z-index: 8;

        .title {
            width: 51.5vw;
            background-image: url('../assets/images/visual-tit-bgc5.png');
        }

        .box {
            width: 53.5vw;

            .buying_top {
                display: flex;
                margin: 0.3vw 0;

                .item-t {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    width: 27vw;
                    height: 5.85vw;

                    .text {
                        flex: 1;
                        height: 5.62vw;
                        display: flex;

                        .img {
                            display: inline-block;
                            width: 5.62vw;
                            height: 5.62vw;
                            padding: 0.16vw;
                            margin-right: 0.12vw;
                            border: rgba(0, 213, 255, 0) solid 0.2vw;
                            overflow: hidden;
                            position: relative;
                            display: flex;
                            align-items: center;
                            justify-content: center;

                            &::before {
                                content: '';
                                position: absolute;
                                left: -50%;
                                top: -50%;
                                width: 200%;
                                height: 200%;
                                background-repeat: no-repeat;
                                background-position: 0 0;
                                background-image: conic-gradient(transparent, #8ed4ff, transparent 40%);
                                animation: rotate 2s linear 2s infinite;
                                z-index: 0;
                            }

                            img {
                                width: 5.3vw;
                                height: 5.3vw;
                                position: absolute;
                                z-index: 1;

                            }
                        }

                        .num {
                            flex: 1;
                            display: inline-block;
                            height: 100%;
                            background: linear-gradient(to right, #09253e, transparent);
                            padding: 0 0.5vw;
                            font-size: $content-title-size2;
                            display: flex;
                            align-items: center;
                            justify-content: center;

                            .el-statistic {
                                margin: 0 0.2vw;

                                ::v-deep .el-statistic__content {
                                    height: 100%;
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;

                                    .el-statistic__number {
                                        font-weight: 700;
                                        font-size: $content-title-size2;
                                        color: #d1eeff;
                                    }
                                }
                            }

                            b {
                                font-weight: 700;
                            }
                        }
                    }

                }
            }

            // 滚动代码 
            .v-s-s {
                width: 51.5vw;
                height: 9vh;
                overflow: hidden;
                text-align: center;
                color: aliceblue;

                .v-s-s_item {
                    width: 100%;
                    height: 4vh;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    text-align: center;
                    flex-direction: row;
                    font-size: $content-title-size2 ;

                    .item {
                        width: 51.5vw;
                        margin: 0 auto;

                        .progtit {
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                            margin-bottom: 0.05vw;

                            s {
                                flex: 1;
                                font-size: $content-title-size2;
                                margin-left: 1vw;
                                text-decoration: none;
                                text-align: left;
                            }

                            span {
                                font-size: $content-title-size2;
                                font-weight: 700;
                            }
                        }

                        // 进度条
                        .el-progress {
                            ::v-deep .el-progress-bar {
                                .el-progress-bar__outer {
                                    height: 1.2vw !important;
                                    background-color: rgba($color: #fff, $alpha: 0.2);

                                    .el-progress-bar__inner {
                                        height: 1.2vw !important;
                                        background-color: rgba($color: #1B7EF2, $alpha: 0.8);
                                    }
                                }
                            }
                        }

                        &:nth-child(2) {
                            color: #00D3FD;

                            // 进度条
                            .el-progress {
                                ::v-deep .el-progress-bar {
                                    .el-progress-bar__outer {
                                        .el-progress-bar__inner {
                                            // background-color: rgba($color: #00D5FF, $alpha: 0.8) !important;
                                            background-color: #00D5FF !important;
                                        }
                                    }
                                }
                            }
                        }

                    }

                }
            }
        }
    }

    // 6
    .brand_user {
        bottom: 1%;
        right: 5%;

        .title {
            background-image: url('../assets/images/visual-tit-bgc6.png');
        }

        .box {
            height: 26.5vw;
            display: flex;
            align-items: center;
            justify-content: space-evenly;

            .item {
                margin-top: 2.6vw;
                position: relative;
                text-align: center;
                font-size: $content-title-size;

                &:nth-child(1) {
                    .text {
                        animation: tranLY 3s infinite;
                    }
                }

                &:nth-child(2) {
                    .text {
                        animation: tranLY 3s infinite 0.2s;
                    }
                }

                &:nth-child(3) {
                    .text {
                        animation: tranLY 3s infinite 0.4s;
                    }
                }

                .text {
                    position: absolute;
                    left: 50%;
                    transform: translateX(-50%);
                    font-size: $content-title-size;
                    font-weight: 700;
                    width: 13vw;
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    b {
                        font-size: $content-title-size;
                    }

                    .el-statistic {
                        ::v-deep .el-statistic__content {
                            display: flex;
                            align-items: center;
                            justify-content: center;

                            .el-statistic__number {
                                font-weight: 700;
                                font-size: $content-title-size;
                                font-weight: 700;
                                color: #d1eeff;
                            }
                        }

                    }
                }

                .image {
                    width: 13vw;
                    height: 20vw;
                    background-image: url('../assets/images/brand_user1.png');
                    background-size: 100% 20vw;
                }

                .bottm {
                    margin-top: 0.8vw;
                    font-size: $content-title-size2;
                }
            }

        }
    }

    // 8
    .merchant {
        bottom: 1%;
        left: 5%;

        .title {
            background-image: url('../assets/images/visual-tit-bgc8.png');
        }

        .box {
            width: 44.5vw;
            height: 26.5vw;
            display: flex;
            align-items: center;
            justify-content: space-evenly;
            padding: 0.8vw 0.5vw;

            .radar-screen {
                width: 25vw;
                height: 25vw;
                border-radius: 50%;
                background-color: rgba($color: #000, $alpha: 0.5);
                position: relative;
                overflow: hidden;


                .radar-rings {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;

                    .radar-ring {
                        width: 100%;
                        height: 100%;
                        border-radius: 50%;
                        position: absolute;
                        box-sizing: border-box;
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%, -50%);
                        border: 0.8vw solid rgba(255, 255, 255, 0.2);
                        z-index: 1;

                        &:nth-child(2) {
                            width: 85%;
                            height: 85%;
                            border-radius: 50%;
                            border: 0.8vw solid rgba(255, 255, 255, 0.2);
                        }

                        &:nth-child(3) {
                            width: 70%;
                            height: 70%;
                            border-radius: 50%;
                            border: 0.8vw solid #00B2FF;
                        }

                        &:nth-child(4) {
                            width: 55%;
                            height: 55%;
                            border-radius: 50%;
                            border: 0.8vw solid #77ADFF;
                        }

                        &:nth-child(5) {
                            width: 40%;
                            height: 40%;
                            border-radius: 50%;
                            border: 0.8vw solid #00F0FF;
                        }
                    }

                    .bor_dot {
                        width: 100%;
                        height: 0.5vw;
                        position: absolute;
                        box-sizing: border-box;
                        top: 50%;
                        left: 50%;

                        .dot {
                            border-top: 0.2vw dotted rgba(255, 255, 255, 0.15);
                            width: 100%;
                        }

                        .dot:nth-child(1) {
                            transform: translate(-50%, -50%) rotate(0deg);
                            transform-origin: 50% 50%;
                        }

                        .dot:nth-child(2) {
                            transform: translate(-50%, -50%) rotate(45deg);
                            transform-origin: 50% 50%;
                        }

                        .dot:nth-child(3) {
                            transform: translate(-50%, -50%) rotate(90deg);
                            transform-origin: 50% 50%;
                        }

                        .dot:nth-child(4) {
                            transform: translate(-50%, -50%) rotate(135deg);
                            transform-origin: 50% 50%;
                        }
                    }
                }

            }

            .list {
                width: 20vw;
                margin-left: 0.5vw;

                .v-s-s {
                    height: 10vh;
                    overflow: hidden;

                    .v-s-s_item {
                        &:nth-child(n) {
                            .item {
                                &::before {
                                    content: '';
                                    display: inline-block;
                                    background-color: #67f6ef;
                                }

                            }
                        }

                        &:nth-child(2n-1) {
                            .item {
                                &::before {
                                    content: '';
                                    display: inline-block;
                                    background-color: #00B2FF;
                                }

                            }
                        }

                        &:nth-child(3n-1) {
                            .item {
                                &::before {
                                    content: '';
                                    display: inline-block;
                                    background-color: #77ADFF;
                                }

                            }
                        }
                    }

                    .item {
                        width: 20vw;
                        height: 4vw;
                        margin-bottom: 0.5vw;
                        padding: 0 0.6vw;
                        background-image: linear-gradient(to right, rgba(255, 255, 255, 0.2), transparent);
                        display: flex;
                        align-items: center;
                        justify-content: space-between;

                        b {
                            flex: 1;
                            font-size: $content-title-size2;
                            text-align: center;
                        }

                        &::before {
                            content: '';
                            display: inline-block;
                            width: 3vw;
                            height: 3vw;
                        }
                    }
                }
            }
        }
    }
}
</style>